﻿
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线示例 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="../css/global.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo">
  <div class="layui-main">
    <a class="logo" href="../layui.html">
      <img src="../imgs/logo.png" alt="layui">
    </a>
    <div class="layui-form component">
      <select lay-search lay-filter="component">
        <option value="">搜索组件或模块</option>
        <option value="../doc/layout.html">grid 栅格布局</option>
        <option value="../doc/layout.html#admin">admin 后台布局</option>
        <option value="../doc/color.html">color 颜色</option>
        <option value="../doc/icon.html">iconfont 字体图标</option>
        <option value="../doc/anim.html">animation 动画</option>
        <option value="../doc/button.html">button 按钮</option>
        <option value="../doc/form.html">form 表单组</option>
        <option value="../doc/form.html#input">input 输入框</option>
        <option value="../doc/form.html#select">select 下拉选择框</option>
        <option value="../doc/form.html#checkbox">checkbox 复选框</option>
        <option value="../doc/form.html#switch">switch 开关</option>
        <option value="../doc/form.html#radio">radio 单选框</option>
        <option value="../doc/form.html#textarea">textarea 文本域</option>
        <option value="../doc/nav.html">nav 导航菜单</option>
        <option value="../doc/nav.html#breadcrumb">breadcrumb 面包屑</option>
        <option value="../doc/tab.html">tabs 选项卡</option>
        <option value="../doc/progress.html">progress 进度条</option>
        <option value="../doc/collapse.html">collapse 折叠面板/手风琴</option>
        <option value="../doc/table.html">table 表格元素</option>
        <option value="../doc/badge.html">badge 徽章</option>
        <option value="../doc/timeline.html">timeline 时间线</option>
        <option value="../doc/auxiliar.html#blockquote">blockquote 引用块</option>
        <option value="../doc/auxiliar.html#fieldset">fieldset 字段集</option>
        <option value="../doc/auxiliar.html#hr">hr 分割线</option>
        
        <option value="../doc/layer.html">layer 弹出层/弹窗综合</option>
        <option value="../doc/laydate.html">laydate 日期时间选择器</option>
        <option value="../doc/layim.html">layim 即时通讯/聊天</option>
        <option value="../doc/laypage.html">laypage 分页</option>
        <option value="../doc/laytpl.html">laytpl 模板引擎</option>
        <option value="../doc/form.html">form 表单模块</option>
        <option value="../doc/dataTable.html">table 数据表格</option>
        <option value="../doc/upload.html">upload 文件/图片上传</option>
        <option value="../doc/element.html">element 常用元素操作</option>
        <option value="../doc/carousel.html">carousel 轮播/跑马灯</option>
        <option value="../doc/layedit.html">layedit 富文本编辑器</option>
        <option value="../doc/tree.html">tree 树形菜单</option>
        <option value="../doc/flow.html">flow 信息流/图片懒加载</option>
        <option value="../doc/util.html">util 工具集</option>
        <option value="../doc/code.html">code 代码修饰</option>
      </select>
    </div>
    <ul class="layui-nav">
      <li class="layui-nav-item ">
        <a href="../doc/doc.html">文档<!--  --></a> 
      </li>
      <li class="layui-nav-item layui-this">
        <a href="demo.html">示例<!-- <span class="layui-badge-dot"></span> --></a>
      </li> 
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://fly.layui.com/" target="_blank">社区</a>
      </li>
      
      
      <li class="layui-nav-item">
        <!--<span class="layui-badge-dot" style="margin: -4px 3px 0;"></span>-->
        <a href="javascript:;">周边</a>
        <dl class="layui-nav-child">
          <dd class="layui-hide-sm layui-show-xs"><a href="http://fly.layui.com/" target="_blank">社区交流</a><hr></dd>
          <dd><a href="http://layim.layui.com/" target="_blank">即时聊天</a></dd>
          <dd><a href="http://www.layui.com/template/fly/" target="_blank">社区模板<span class="layui-badge-dot"></span></a></dd>
          <hr>
          <dd><a href="http://www.layui.com/alone.html" target="_blank">独立组件</a></dd>
          <dd><a href="http://fly.layui.com/jie/9842/" target="_blank">Axure组件</a></dd>
        </dl>
      </li>
      
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://www.layui.com/admin/" target="_blank">后台方案<span class="layui-badge-dot"></span></a>
      </li>
      
    </ul>
  </div>
</div>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="../js/html5.min.js"></script>
  <script src="../js/respond.min.js"></script>
<![endif]--> 
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      
<ul class="layui-nav layui-nav-tree site-demo-nav">
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">开发工具</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="demo.html">调试预览</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">布局</a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="grid.html">栅格</a>
      </dd>
      <dd class="">
        <a href="admin.html">后台布局</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">基本元素</a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="button.html">按钮</a>
      </dd>
      <dd class="">
        <a href="form.html">表单</a>
      </dd>
      <dd class="">
        <a href="nav.html">导航/面包屑</a>
      </dd>
      <dd class="">
        <a href="tab.html">选项卡</a>
      </dd>
      <dd class="">
        <a href="progress.html">进度条</a>
      </dd>
      <dd class="">
        <a href="panel.html">面板</a>
      </dd>
      <dd class="">
        <a href="badge.html">徽章</a>
      </dd>
      <dd class="">
        <a href="timeline.html">时间线</a>
      </dd>
      <dd class="">
        <a href="table-element.html">静态表格</a>
      </dd>
      <dd class="">
        <a href="anim.html">动画</a>
      </dd>
      <dd class="layui-this">
        <a href="auxiliar.html">辅助元素</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">组件示例</a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="layer.html">
          弹出层
        </a>
      </dd>
      <dd class="">
        <a href="laydate.html">
          日期与时间选择
        </a>
      </dd>
      <dd class="">
        <a href="layim.html">
          即时通讯
        </a>
      </dd>
      <dd class="">
        <a href="table.html">
          数据表格
        </a>
      </dd>
       <dd class="">
        <a href="laypage.html">
          分页
        </a>
      </dd>
      <dd class="">
        <a href="upload.html">
          文件上传
        </a>
      </dd>
      <dd class="">
        <a href="carousel.html">
          轮播
        </a>
      </dd>
      <dd class="">
        <a href="laytpl.html">
          模板引擎
        </a>
      </dd>
      
      <dd class="">
        <a href="flow.html">
          流加载
        </a>
      </dd>
      <dd class="">
        <a href="util.html">
          工具集
        </a>
      </dd>
      <dd class="">
        <a href="code.html">
          代码修饰器
        </a>
      </dd>
      <dd class="">
        <a href="layedit.html">
          <span style="font-size:1px;">1.0.9:</span>富文本编辑器
        </a>
      </dd>
      <dd class="">
        <a href="tree.html">
          <span style="font-size:1px;">1.0.9:</span>树形菜单
        </a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
</ul>

    </div>
  </div>
  
  <div name="site-content">
	<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <ul class="layui-tab-title site-demo-title">
      <li class="layui-this">预览</li>
      <li>查看代码</li>
      <li>帮助</li>
    </ul>
    <div class="layui-body layui-tab-content site-demo site-demo-body">
    
    
      <div class="layui-tab-item layui-show">
        <div class="layui-main">
          <div id="LAY_preview">
            
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>引用区块 - 默认风格</legend>
</fieldset>
 
<blockquote class="layui-elem-quote">这个貌似不用多介绍，因为你已经在太多的地方都看到</blockquote>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>引用区块 - 一般风格</legend>
</fieldset>
 
<blockquote class="layui-elem-quote layui-quote-nm">
  猿强，则国强。国强，则猿更强！ 
  <br>——孟子（好囖。。其实这特喵的是我说的）
</blockquote>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>字段集区块</legend>
</fieldset>
 
<fieldset class="layui-elem-field">
  <legend>爱好</legend>
  <div class="layui-field-box">
    你可以在这里放任何内容，比如表单神马的
  </div>
</fieldset>
<br>
<fieldset class="layui-elem-field layui-field-title">
  <legend>带标题的横线</legend>
</fieldset>
 
内容区域
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>分割线</legend>
</fieldset>
 
默认分割线
<hr>
 
赤色分割线
<hr class="layui-bg-red">
 
橙色分割线
<hr class="layui-bg-orange">
 
墨绿分割线
<hr class="layui-bg-green">
 
青色分割线
<hr class="layui-bg-cyan">
 
蓝色分割线
<hr class="layui-bg-blue">
 
黑色分割线
<hr class="layui-bg-black">
 
灰色分割线
<hr class="layui-bg-gray">
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>纯圆角</legend>
</fieldset>
 
<div class="layui-inline">
  <img src="../imgs/168.jpg" class="layui-circle">
</div>
       
          </div>
          
        </div>
      </div>
      
      
      <div class="layui-tab-item">
<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
</textarea>
      </div>
      
      
      <div class="layui-tab-item">
        <div class="layui-main">
          <fieldset class="layui-elem-field layui-field-title" >
            <legend>相关</legend>
          </fieldset>
          <a class="layui-btn layui-btn-normal" href="../doc/auxiliar.html" >辅助性元素文档</a>
        </div>
      </div>
      
        
    </div>
  </div>
  </div>
  
  
  
  <div class="layui-footer footer footer-demo">
  <div class="layui-main">
    <p>&copy; 2018 <a href="../layui.html">layui.com</a> MIT license</p>
    <p>
      <a href="http://fly.layui.com/case/2018/" target="_blank">案例</a>
      <a href="http://fly.layui.com/jie/3147/" target="_blank">众筹</a>
      <a href="mailto:xianxin@layui-inc.com">联系</a>
      <a href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow">GitHub</a>
      <a href="https://gitee.com/sentsin/layui" target="_blank" rel="nofollow">码云</a>
      <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
    <p class="site-union">
      <a href="https://www.upyun.com?from=layui" target="_blank" rel="nofollow" upyun><img src="../imgs/upyun.png?t=1"></a>
      <span>提供 CDN 赞助</span>
    </p>
  </div>
</div>
<script async src="../js/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../layui/layui.js?t=1515376178738" charset="utf-8"></script>
<script>
window.global = {
  pageType: 'demo'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
layui.config({
	 base: '../js/'
	 ,version: '1515376178709'
}).use('global');
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
</body>
</html>